<template>
  <div id="home">
    <!-- <login></login> -->
    <!-- <tianjiaTs></tianjiaTs> -->
    <!-- <hongbaoTs></hongbaoTs> -->
    <!-- <jifenTs></jifenTs> -->
    <!--     <neirongTs
      v-on:closeTs="closeTs"
      v-if="firstTishi"
    ></neirongTs> -->
    <div
      class="scroll-box"
      ref="wrapper"
    >
      <div>
        <!-- <router-link
          to="/assemble"
          style="font-size:20px;"
        >跳转拼团</router-link>
        <router-link
          to="/limitedtimelist"
          style="font-size:20px;"
        >跳转限时</router-link>-->
        <div
          v-for="(item,index) in domArr"
          :key="index"
        >

          <!-- <router-link
            to="/activity_index"
            v-if="item.type === 1"
            style="font-size:20px;"
          >活动中心</router-link> -->
          <sousuo v-if="item.type === 1"></sousuo>
          <teacher-list
            v-if="item.type === 13 && item.stylesType === 0"
            :type="item"
          ></teacher-list>
          <teacherlist1 v-if="item.type === 13 && item.stylesType === 1"
            :type="item">

          </teacherlist1>
          <vuxswiper
            v-if="item.type === 'shopBanner'"
            :bannerlist="item.type === 'shopBanner' ? item : ''"
            v-on:gobannerId="gobannerId"
          ></vuxswiper>
          <dabiaott v-if="item.type === 2 && item.stylesType === 1" :type="item"  v-on:tiaokecheng="gobannerId"></dabiaott>
          <fenlei
            v-if="item.type === 11"
            :type="item"
            v-on:feileidetail="gobannerId"
          ></fenlei>
          <mingshikecheng
            v-if="item.type === 2 && item.stylesType === 2 "
            :type="item">
          </mingshikecheng>
          <fenleidaohang
            v-on:feileidetail="gobannerId"
            v-if="item.type === 4"
            :type="item"
          ></fenleidaohang>
          <biaoti
            v-if="item.type === 6 "
            :biaotititle="item"
            v-on:morelist="morelist"
          ></biaoti>
          <recommendation
            v-if="item.type === 2&&item.stylesType === 3"
            :recomment="item"
            v-on:jiaoyudetail="jiaoyudetail"
          ></recommendation>
          <hotclassification
            v-if="item.type === 9"
            :huachaungList="item"
            v-on:jiaoyudetail="jiaoyudetail"
          ></hotclassification>
          <pintuan
            v-if="item.type === 10"
            :pintuanList="item"
            v-on:pinyuandetail="pinyuandetail"
          ></pintuan>
          <hotclass
            v-if="item.type === 7"
            :classList="item"
            v-on:jiaoyudetail="jiaoyudetail"
          ></hotclass>

          <hotclasslist
            v-if="item.type === 3&&item.stylesType === 1"
            :hotClassList="item"
            v-on:jiaoyudetail="jiaoyudetail"
          ></hotclasslist>

          <jingxuanzhuanti
            v-if="item.type === 2&&item.stylesType === 0"
            :picbanner="item"
            v-on:gobannerId="gobannerId"
          ></jingxuanzhuanti>

          <mingshi
            v-if="item.type === 8"
            :mingshiList="item"
            v-on:teacherdetail="teacherdetail"
          ></mingshi>
          <!-- v-if="item.type === 8" -->

          <xianshidijia
            v-if="item.type === 12"
            :xianshiList="item"
            v-on:xianshidetail="xianshidetail"
          ></xianshidijia>
          <!-- v-if="item.type === 12" -->
          <guess
            v-if="item.type === 3&&item.stylesType === 0"
            :guessList="item"
            v-on:jiaoyudetail="jiaoyudetail"
          ></guess>
          <yun v-if="item.type === 3 && item.stylesType === 2"  :List="item" v-on:jiaoyudetail="jiaoyudetail"></yun>
          <!-- v-if="item.type === 3&&item.stylesType === 0" -->
        </div>
        <div style="height:1px;"></div>
      </div>
    </div>
    <tab></tab>
  </div>
</template>

<script>
import wxReady from '@/utils/wxReady'
import {
  mapState
} from 'vuex'
import {
  getOnline
} from '@/api/home'

import yun from '@/components/index/yun'
import teacherlist1 from '@/components/index/teacherlist1'
import dabiaott from '@/components/index/dabiaott'
import mingshikecheng from '@/components/index/mingshikecheng'
import tabbat from '@/components/index/tab'
import teacherList from '@/components/index/teacherList'
import search from '@/components/index/search'
import vuxswiper from '@/components/index/vuxswiper'
import sousuo from '@/components/index/sousuo'
import jingxuanzhuanti from '@/components/index/jingxuanzhuanti'
import mingshi from '@/components/index/mingshi'
import xianshidijia from '@/components/index/xianshidijia'
import guess from '@/components/index/guess'
import pintuan from '@/components/index/pintuan'
import tianjiaTs from '@/components/index/tianjiaTs'
import hongbaoTs from '@/components/index/hongbaoTs'
import jifenTs from '@/components/index/jifenTs'
import neirongTs from '@/components/index/neirongTs'
import biaoti from '@/components/index/biaoti'
import fenleidaohang from '@/components/index/fenleidaohang'
import recommendation from '@/components/index/recommendation'
import fenlei from '@/components/index/fenlei'
import hotclassification from '@/components/index/hotclassification'
import hotclass from '@/components/index/hotclass'
import hotclasslist from '@/components/index/hotclasslist'
import type from '@/components/index/type'
import hot from '@/components/index/hot'
import education from '@/components/index/education'
import list from '@/components/public/list'
import tab from '@/components/public/tab'
import educations from '@/components/index/education1'
import titles from '@/components/index/title'
import BScroll from 'better-scroll'

// import login from '@/views/login/login'

export default {
  data () {
    return {
      domArr: [], // 页面数据
      time: 100

    }
  },
  components: {
    teacherlist1,
    dabiaott,
    mingshikecheng,
    tabbat,
    teacherList,
    fenleidaohang,
    search,
    vuxswiper,
    type,
    hot,
    education,
    list,
    tab,
    educations,
    titles,
    sousuo,
    fenlei,
    recommendation,
    hotclassification,
    hotclass,
    hotclasslist,
    jingxuanzhuanti,
    mingshi,
    xianshidijia,
    guess,
    pintuan,
    tianjiaTs,
    hongbaoTs,
    jifenTs,
    biaoti,
    neirongTs,
    yun
  },
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id,
      HomeScrollY: state => state.HomeScrollY
    })
  },
  created () {
    this.getData()
  },
  mounted () {
    this.$nextTick(() => {
      this.wxShare()
    })
  },
  destroyed () {
    if (this.scrollY !== undefined) {
      this.$store.commit('HomeScrollY', this.scrollY)
    }
  },
  methods: {
    initscroll () {
      this.$nextTick(() => {
        this.wxShare()
        setTimeout(() => {
          this.scrollA = new BScroll(this.$refs.wrapper, {
            click: true,
            scrollY: true,
            startY: 0,
            tap: true,
            probeType: 3,
            pullUpLoad: {
              threshold: 0
            }
          })
          this.scrollA.on('scroll', pos => {
            this.scrollY = pos.y
          })
          if (this.HomeScrollY) {
            this.scrollA.scrollTo(0, this.HomeScrollY, 0)
          }
        }, 200)
      })
    },
    // 请求数据函数
    getData () {
      getOnline().then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          this.domArr = JSON.parse(
            res.data.data.json
          ).ext.styles[0].index.elements
          this.initscroll()
          setTimeout(() => {
            this.$store.commit('updateLoadingStatus', { isLoading: false })
          }, 340)
          // console.log(this.domArr)
          // console.log(`sssssssssssssssssssssss`)
          // console.log(this.domArr)
          //           console.log(
          //             JSON.parse(res.data.data.json).ext.styles[0].index.elements
          //           )
          // console.log(`sssssssssssssssssssssss`)
        }
      })
    },
    // banner跳转函数
    gobannerId (item) {
      // console.log(item)
      if (item.param) {
        if (item.param.lex === 'kecheng') {
          this.jiaoyudetail(item.param)
        } else if (item.param.lex === 'pintuan') {
          this.pinyuandetail(item.param)
        } else if (item.param.lex === 'fenlei') {
          this.feileidetail(item.param)
        } else if (item.param.lex === 'jiangshi') {
          this.teacherdetail(item.param)
        } else {
          this.$router.push({
            path: item.param.link_url
          })
        }
      }
    },
    // 分类跳转函数
    link (item, index) {
      this.$router.push({
        path: '/information',
        query: {
          jump_id: item.jump_id,
          jump_name: item.jump_name
        }
      })
      // console.log(item);
    },
    // 课程详情
    jiaoyudetail (item) {
      if (item) {
        if (window.__wxjs_is_wkwebview !== true) {
          this.$router.push({
            path: '/coursedetails',
            query: {
              curriculumId: item.curriculum_id
            }
          })
        } else {
          window.location.href = `/coursedetails?curriculumId=${item.curriculum_id}`
        }
      }
    },
    // 限时
    xianshidetail (item) {
      if (window.__wxjs_is_wkwebview !== true) {
        this.$router.push({
          path: '/timelimiteddiscount',
          query: {
            discount_id: item.discount_id,
            curriculum_id: item.curriculum_id
          }
        })
      } else {
        window.location.href = `/timelimiteddiscount?discount_id=${item.discount_id}&curriculum_id=${item.curriculum_id}`
      }
    },
    // 分类详情
    feileidetail (item) {
      // console.log(item)
      this.$router.push({
        path: '/information',
        query: {
          jump_id: item.classification_id,
          itemTitle: item.title ? item.title : ''
        }
      })
    },
    // 名师详情
    teacherdetail (item) {
      // console.log(item)
      this.$router.push({
        path: '/teacher',
        query: {
          lecturer_id: item.lecturer_id
        }
      })
    },
    // 拼团详情
    pinyuandetail (item) {
      if (window.__wxjs_is_wkwebview !== true) {
        this.$router.push({
          path: '/assembledetails',
          query: {
            join_class_id: item.join_class_id,
            curriculum_id: item.curriculum_id
          }
        })
      } else {
        window.location.href = `/assembledetails?join_class_id=${item.join_class_id}&curriculum_id=${item.curriculum_id}`
      }
    },
    // 更多
    morelist (item) {
      // console.log(item)
      if (item.indexOf('/') !== -1) {
        this.$router.push({
          path: item
        })
      } else {
        this.$router.push({
          path: '/other',
          query: {
            link: item
          }
        })
      }
    },
    closeTs (item) {
      // console.log('hone')
      this.firstTishi = item
    },
    // 分享
    wxShare () {
      let title = '知运'
      let desc = '了解更多知识，请关注“知运”公众号'
      let image = 'https://o6wndwjxn.qnssl.com/logo.png'
      wxReady(title, desc, 'home', image).then(() => {
        // alert('赠送成功等待他人领取')
        // this.marsk = false
      })
    }
    // debounce(func, wait) {
    //   let timeout
    //   return function () {
    //     let context = this
    //     let args = arguments
    //     console.log(this) // 这里打印为什么是 undefined
    //     if (timeout) clearTimeout(timeout)
    //     timeout = setTimeout(() => {
    //       func.apply(context, args)
    //     }, wait)
    //   }
    // },
    // dun () {
    //   alert(123)
    // },
    // enbtn () {
    //   this.debounce(this.dun, 1000)()
    // }
  }
}
</script>

<style lang="less" scoped>
.enbtn {
  width: 100%;
  height: 60px;
  background-color: #fcc;
}
.scroll-box {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 54px;
  right: 0;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.sl-l {
  text-align: left;
  flex: 1;
  color: #ccc;
}

.sl-r {
  text-align: right;
  flex: 1;
  color: red;
}

.pos {
  position: fixed;
  top: 44px;
  left: 0;
  bottom: 54px;
  right: 0;
  overflow: hidden;
}

.scroll {
  width: 100%;
  height: 100%;
}
</style>
